<template>
    <div class="root">
        <chat_left @component-ready="handleComponentReady"></chat_left>
        <chat_list></chat_list>
        <chat_box></chat_box>
    </div>
</template>

<script>
import chat_left from '../components/chat_left.vue';
import chat_list from '@/components/chat_list.vue';
import chat_box from '@/components/chat_box.vue';
export default {
    data() {
        return {};
    },
    components: {
        chat_left,chat_list,chat_box
    },
    mounted() {
        console.log('父组件已挂载');
    },
    methods: {
        handleComponentReady(message) {
            console.log(message);
        }
    }
};
</script>

<style lang="scss" scoped>
/* 去除默认的外边距和内边距 */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置 html 和 body 元素的高度和宽度为视口的高度和宽度 */
html,
body {
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* 隐藏滚动条 */
}

.root {
    // border: 1px solid rebeccapurple;
    height: 100vh;
    width: 100vw;
}
</style>